<template>
  <view>
    <view class="ding_ss">
      <image src="/static/img/搜索.png" class="sousuo"></image>
      <input class="input_md" type="text" :keyword="keyword" placeholder="筛选订单号/手机号/昵称"/>
    </view>

    <view class="menu">
      <view :class="type == '10' ? 'menu01' : 'menu02'" @tap="changetype" id="10">
        <text>全部</text>
      </view>
      <view :class="type == '0' ? 'menu01' : 'menu02'" @tap="changetype" id="0">
        <text>待付款</text>
      </view>
      <view :class="type == '1' ? 'menu01' : 'menu02'" @tap="changetype" id="1">
        <text>待使用</text>
      </view>
      <view :class="type == '2' ? 'menu01' : 'menu02'" @tap="changetype" id="2">
        <text>已使用</text>
      </view>
      <view :class="type == '3' ? 'menu01' : 'menu02'" @tap="changetype" id="3">
        <text>已完成</text>
      </view>
      <view :class="type == '4' ? 'menu01' : 'menu02'" @tap="changetype" id="4">
        <text>已取消</text>
      </view>
    </view>

    <view class="list_box">
      <view class="list_kk" v-for="(item,index) in list">
        <view class="h1">
          <view>{{ item.username }}</view>
          <view class="" v-if="item.type == 0">待付款</view>
          <view class="" v-if="item.type == 1">待使用</view>
          <view class="" v-if="item.type == 2">已使用</view>
          <view class="" v-if="item.type == 3">已完成</view>
          <view class="" v-if="item.type == 4">已取消</view>
        </view>

        <view class="h2">
          <view class="h2">
            <image class="dianhua" src="/static/img/3.1电话.png"></image>
          </view>

          <view>{{ item.tel }}</view>
        </view>

        <view class="h2">
          <view>茶室名称：</view>
          <view>{{ item.snapshoot.name }}</view>
        </view>

        <view class="h2">
          <view>订单号：</view>
          <view>{{ item.order_no }}</view>
        </view>

        <view class="h2">
          <view>实付金额：</view>
          <view class="hh">￥{{ item.pay_price }}</view>
        </view>

        <view class="h2">
          <view>服务时间：</view>
          <view>{{ item.start_time + ' - ' + item.end_time }}</view>
        </view>

        <view class="h2">
          <view>创建时间：</view>
          <view>{{ item.create_time }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// pages/dingdan/dingdan.js
var app = getApp();
import {cleaninglist} from "@/common/api";

export default {
  data() {
    return {
      type: '10',
      page: 1,
      limit: 20,
      list: [],
      keyword: '',
      nextpageflag: true
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {
    this.cleaninglist()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.nextpageflag) {
      const page = this.page + 1;
      this.setData({
        page: page
      })
      this.cleaninglist()
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    changetype: function (option) {
      var that = this;
      var type = option.currentTarget.id;
      that.setData({
        type: type
      });
      this.cleaninglist()
    },
    cleaninglist() {
      uni.showLoading({
        title: '加载中...'
      });
      const paramData = {
        status: this.type,
        page: this.page,
        store_id: app.globalData.store_id
      }
      cleaninglist(paramData, (res => {
        console.log(res)
        const list = res.data.data.list
        if (list.length < this.limit) {
          this.setData({
            nextpageflag: false
          })
        }
        const newlist = this.list.concat(list)
        this.setData({
          list: newlist
        })
        uni.hideLoading();
      }))
    }
  }
};
</script>
<style>
.ding_ss {
  display: flex;
  align-items: center;
  background-color: rgb(245, 243, 243);
  border-radius: 100rpx;
  width: 90%;
  margin: 10rpx 15% 20rpx 5%;
}

.ss {
  margin-left: 10rpx;
  height: 90rpx;
  padding-left: 14rpx;
  display: flex; /* 使用Flexbox布局 */
  background-color: rgb(245, 243, 243); /* 设置输入框背景色为灰色 */
  border-radius: 5px; /* 圆角设置为20px */
  justify-content: flex-start;
  align-items: center;
}

.sousuo {
  width: 60rpx;
  height: 75rpx;
}

.menu {
  width: 100%;
  height: auto;
  overflow: hidden;
  top: 0;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.menu01 {
  width: 14%;
  line-height: 90rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #ff4800;
  border-bottom: 2px solid #ff4800;
}

.menu02 {
  width: 14%;
  line-height: 90rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #666666;
}

.list_box {
  background-color: rgba(219, 219, 219, 0.274);
  padding: 20rpx;
}

.list_kk {
  background-color: rgb(255, 255, 255);
  border-radius: 10rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
}

.dianhua {
  width: 35rpx;
  height: 35rpx;
}

.h1 {
  display: flex;
  justify-content: space-between;
  font-size: 35rpx;
  font-weight: 600;
  color: rgb(77, 75, 75);
  margin-bottom: 10rpx;
}

.h2 {
  display: flex;
  align-items: center;
  line-height: 1.5;
  font-size: 28rpx;
}

.hh {
  color: rgb(216, 15, 15);
  font-weight: 550;
}
</style>
